
<template>
 <div class="wrap" style="padding: 15px">
   <el-row>
     <el-form :inline="true" :model="queryParams" class="demo-form-inline">
       <el-form-item label="订单号">
         <el-input
           clearable
           v-model="queryParams.rechargeNumber"
           placeholder="订单号"
         ></el-input>
       </el-form-item>
       <el-form-item label="手机号">
         <el-input
           clearable
           v-model="queryParams.phone"
           placeholder="手机号"
         ></el-input>
       </el-form-item>
       <el-form-item label="日期">
         <el-date-picker
           v-model="date"
           type="daterange"
           range-separator="至"
           value-format="yyyy-MM-dd"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           @change="getDate"
         >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="订单状态">
         <el-select
           clearable
           v-model="queryParams.payStatus"
           placeholder="订单状态"
         >
           <el-option label="待支付" value="0"></el-option>
           <el-option label="支付完成" value="1"></el-option>
           <el-option label="退款" value="2"></el-option>
           <el-option label="取消" value="3"></el-option>
         </el-select>
       </el-form-item>

       
       <el-form-item>
         <el-button type="primary" @click="search">查询</el-button>
       </el-form-item>
     </el-form>
   </el-row>

   <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
     <el-table-column type="index" label="序号"></el-table-column>
     <el-table-column label="订单号" prop="rechargeNumber"></el-table-column>
     <el-table-column label="会员名" prop="memberName"></el-table-column>
     <el-table-column label="手机号" prop="phone"></el-table-column>
     <el-table-column label="续期天数" prop="rechargeDay"></el-table-column>
     <el-table-column label="创建时间" prop="createTime"></el-table-column>
    
     <el-table-column label="订单状态" prop="payStatus">
       <template slot-scope="scope">
         {{ setOrderStatusTxt(scope.row.payStatus) }}
       </template>
     </el-table-column>
   
   </el-table>
   <div class="block" style="text-align: right">
     <el-pagination
       @size-change="getData"
       @current-change="getData"
       :current-page.sync="queryParams.page"
       :page-sizes="[10, 20, 30, 40]"
       :page-size.sync="queryParams.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
     ></el-pagination>
   </div>
 </div>
</template>
<script>
import { dailyRechargePageList } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {
 components: {
   
 },
 data () {
   return {
     date: [],
     queryParams: {
       startTimeStr: undefined,
       endTimeStr: undefined,
       rechargeNumber: undefined,
       orderStatus: undefined,
       phone: undefined,
       page: 1,
       pageSize: 10,
     },
     tableData: [

     ],
     total: 0,
     loading: false,

   };
 },

 created () {
   this.getData()
 },
 methods: {
   getDate (e) {
     if (e) {
       this.queryParams.startTimeStr = e[0]
       this.queryParams.endTimeStr = e[1]
     } else {
       this.queryParams.startTimeStr = ""
       this.queryParams.endTimeStr = ""
     }
   },
   // 新增
   show (id) {
     this.$refs.detail.show(id)
   },
   getData () {
    dailyRechargePageList(this.queryParams).then(res => {
       res.data.result.list.map(item => {
         item.amount = divide(item.amount, 100)
       })
       this.tableData = res.data.result.list
       this.total = res.data.result.total
     })
   },
 
   // 获取订单状态文案
   setOrderStatusTxt (orderStatus) {
     let str = ""
     switch (orderStatus) {
       case "1":
         str = "已完成"
         break;
       case "0":
         str = "待支付"
         break;
       case "3":
         str = "取消支付"
         break;
       case "2":
         str = "退款"
         break;
     }
     return str;
   },
   confirmOrder (record) {
     this.$confirm('此操作将认该订单, 是否继续?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       rechargeConfirm({ rechargeNumber: record.rechargeNumber }).then(res => {
         if (res.data.status == 200) {
           this.getData()
           this.$message({
             type: 'success',
             message: '确认成功!'
           });
         }

       })

     }).catch(() => {
       this.$message({
         type: 'info',
         message: '已取消删除'
       });
     });
   },
   search () {
     this.queryParams.page = 1
     this.getData()
   }
 },
};
</script>
